<template>
  <div class="gongxiandu">
    <div class="zb-title">
      客户贡献度占比
    </div>
    <div ref="gxd" class="gxd-box"></div>
  </div>
</template>

<script>
  export default {
    name: 'gongxiandu',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.getEchartData()
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEchartData() {
        const chart1 = this.$refs.gxd;
        if (chart1) {


          const myChart = this.$echarts.init(chart1)
          var that = this;
          var index = 0;
          var colorList = ['#f36c6c', '#e6cf4e', '#20d180', '#0093ff'];
          const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        show: false
    },
    grid: {
        left: 100
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'value',

        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }

    },
    yAxis: {
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisPointer: {
            label: {
                show: true,
                margin: 30
            }
        },
        data: ['杭州市', '宁波市', '温州市', '湖州市', '嘉兴市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
        axisLabel: {
            margin: 100,
            fontSize: 14,
            align: 'left',
            color: '#333',
            rich: {
                a1: {
                    color: '#fff',
                    backgroundColor: colorList[0],
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                a2: {
                    color: '#fff',
                    backgroundColor: colorList[1],
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                a3: {
                    color: '#fff',
                    backgroundColor: colorList[2],
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                },
                b: {
                    color: '#fff',
                    backgroundColor: colorList[3],
                    width: 30,
                    height: 30,
                    align: 'center',
                    borderRadius: 2
                }
            },
            formatter: function(params) {
                if (index == 11) {
                    index = 0;
                }
                index++;
                if (index - 1 < 3) {
                    return [
                        '{a' + index + '|' + index + '}' + '  ' + params
                    ].join('\n')
                } else {
                    return [
                        '{b|' + index + '}' + '  ' + params
                    ].join('\n')
                }
            }
        }
    },
    series: [{
            z: 2,
            name: 'value',
            type: 'bar',
            data: [3.66, 2.86, 1.82, 1.8, 1.53, 1.47, 1.3, 1.25, 1.1, 1.02, 1].map((item, i) => {
                var itemStyle = {
                    color: i > 3 ? colorList[3] : colorList[i]
                }
                return {
                    value: item,
                    itemStyle: itemStyle
                };
            }),
            label: {
                show: true,
                position: 'right',
                color: '#333333',
                fontSize: 14,
                offset: [10, 0]
            }
        }

    ]
};
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },
      getEchartData() {
        const chart1 = this.$refs.gxd;
        if (chart1) {


          const myChart = this.$echarts.init(chart1)
          var that = this;
          var weatherIcons = {
            'jb': '../../../../static/img/1.png',
            'jgt': '../../../../static/img/2.png',
            'bdty': '../../../../static/img/3.png',
            'cn': '../../../../static/img/4.png',
            'yw': '../../../../static/img/5.png',
          };
          const option = {

            grid: {
              left: '3%',
              right: '4%',
              bottom: '0%',
              top: '6%',
              containLabel: true
            },
            xAxis: {
              show: false,
              type: 'value',

            },
            yAxis: {
              type: 'category',
              position: 'left',
              data: ['巨邦', '京港通', '邦达天原', '菜鸟', '燕文'],
              axisLabel: {
                show: true,
                //rotate:'30',
                textStyle: {
                  color: '#f8d2be', //更改坐标轴文字颜色
                  fontSize: that.commonFunction.fontSize(0.14) //更改坐标轴文字大小
                }
              }
              /*
              axisLabel: {
                formatter: function(value) {
                  return '{' + value + '| }\n{value|' + value + '}';
                },
                margin: 20,
                rich: {
                  value: {
                    lineHeight: 30,
                    align: 'center'
                  },
                  'jb': {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.jb
                    }
                  },
                  '京港通': {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.jgt
                    }
                  },
                  '邦达天原': {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.bdty
                    }
                  },
                  '菜鸟': {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.cn
                    }
                  },
                  '燕文': {
                    height: 40,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.yw
                    }
                  }
                }
              },
              */
            },
            series: [{
              name: '2012年',
              type: 'bar',
              showBackground: true,
              barWidth: '20',
              barGap: '20%',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'insideRight',
                    // formatter: '{per|{c}%}',
                    formatter: function(v){
                      console.log(v.data)
                      if(v.data) return v.data.value * -1 +"%";
                      return v ;
                    },
                    rich: {
                      b: {
                        color: '#00ffff',
                        lineHeight: 22,
                        align: 'center',
                        padding: [2, 0],
                        fontSize: 12,
                      },
                      c: {
                        color: '#00ffff',
                        lineHeight: 22,
                        align: 'center',
                        padding: [2, 0],
                        fontSize: 10,
                      },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0,
                        margin: [2, 3]
                      },
                      per: {
                        color: '#fff',
                        fontSize: 14,
                        padding: [2, 4]
                      }
                    }


                  },
                }
              },
              data: [{
                value: -7.24,
                itemStyle: {
                  color: '#1876a6'
                }
              }, {
                value: -8.62,
                itemStyle: {
                  color: '#1a8ba6'
                }
              }, {
                value: -8.72,
                itemStyle: {
                  color: '#1f9298'
                }
              }, {
                value: -10.99,
                itemStyle: {
                  color: '#1e9285'
                }
              }, {
                value: -15.41,
                itemStyle: {
                  color: '#1e9371'
                }
              }]
            }]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      }
    }
  }
</script>

<style scoped>
  .gongxiandu {
    width: 100%;
    height: 100%;
  }

  .zb-title {
    width: 100%;
    height: .3rem;
    background: url(../../../../static/img/geyuanquyewuliang.png) no-repeat left center;
    color: #ffffff;
    line-height: .3rem;
    font-size: .16rem;
    padding-left: .10rem;
  }

  .zb-box {
    background-size: 100% 100%;
  }

  .gxd-box {
    height: 90%;
    padding-top: 4%;
  }

  .zb-box .title {
    text-align: right;
    color: #0ac2dd;
    padding: .1rem 0;
    height: .4rem;
    line-height: .16rem;
    font-size: .12rem;
  }

  .zb-box .box {
    display: flex;
    justify-content: space-between;
    background: url(../../../../static/img/jianbiankuang.png) no-repeat right center;
    height: .3rem;
    align-items: center;
    padding-right: .1rem;
    color: #0ac2dd;
    margin-bottom: .25rem;
    font-size: .14rem;
  }

  .zb-box .box .text {
    padding-left: .05rem;
  }

  .zb-box .num1 {
    color: #b7e831;
  }

  .zb-box .num2 {
    color: #29e6a6;
  }

  .zb-box .num3 {
    color: #25d4fc;
  }

  .yuan {
    width: 50%;
    height: 50%;

    float: left;
  }
</style>
